<template>
  <div>
    <div class="vip-top">
      <van-image round class="top" src="/me_img/head_portrait.jpg" alt="" />
      <p>182****0696</p>
    </div>
    <div class="vipcard">
      <img src="/payment_img/vip-no.png" alt="" />
    </div>
    <div
      class="sub-cardvip"
      style="display: flex; justify-content: space-evenly"
    >
      <div class="sub-card active">
        <h6 class="type">月卡会员</h6>
        <p class="price"><span>￥</span><span>18</span></p>
        <p class="des">开通月卡会员<br />每月仅需0.6元</p>
      </div>
      <div class="sub-card">
        <h6 class="type">年卡会员</h6>
        <p class="price"><span>￥</span><span>168</span></p>
        <p class="des">更多精彩<br />持续更新</p>
      </div>
    </div>
    <p class="buy-text" style="display: flex; justify-content: center">
      <span>购买即同意</span
      ><router-link to="/vipagreement" style="color: black"
        >《读者蜂巢会员服务协议》</router-link
      >
    </p>
    <back-home />
  </div>
</template>

<script>
import BackHome from '../components/BackHome.vue'
export default {
  components: { BackHome },
}
</script>

<style scoped>
.vip-top {
  display: flex;
  background: url('/payment_img/vip-top.png') center -64px no-repeat #fff;
  height: 15em;
  background-size: 100% 100%;
}
.top {
  width: 2.8em;
  height: 2.8em;
  margin: 15px;
}
.vip-top p {
  height: 48px;
  line-height: 58px;
  margin-top: 15px;
  font-size: 16px;
  color: #d09e73;
  font-weight: 600;
}
.vipcard img {
  margin-left: 10%;
  width: 80%;
  margin-top: -151px;
}
.sub-card p,
h6 {
  margin: 0;
}
.sub-card {
  width: 110px;
  height: 130px;
  padding: 12px 0;
  margin: 20px 0;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #bda26c;
}
.active {
  background: linear-gradient(66deg, #e7d6b8, #ddc297);
}
.type {
  font-size: 16px;
  color: #8b572a;
  line-height: 26px;
  font-weight: 400;
}
.price {
  line-height: 40px;
}
.price span:first-child {
  margin: 0 4px 5px 0;
  font-size: 14px;
}
.price span:last-child {
  font-size: 25px;
  color: #8b572a;
  line-height: 40px;
}
.des {
  font-size: 10px;
  color: rgba(51, 51, 51, 0.6);
  line-height: 16px;
  transform: scale(0.9);
}
.buy-text,
.buy-text a {
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
</style>
